<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="shortcut icon" href="./ico" type="image/x-icon">
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.father{
		width: 500px;
		/*height: 400px;*/

	}
	.box1{
		width: 100px;
		height: 100px;
		background-color:red;
		float: left;
	}
	.box2{
		width: 100px;
		height: 300px;
		background-color:green;
		float: left;
	}
	.box3{
		width: 100px;
		height: 100px;
		background-color:blue;
		float: left;
	}
	.father2{
		width: 600px;
		height: 200px;
		background-color: yellow;
	}
	/*p:after{
		content: '.'
	}*/
	.clearfix:after{
		content: '.';
		clear:both;
		display: block;
		visibility: hidden;
		height: 0;

	}
	/*

		
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both
}


	*/
	</style>
</head>
<body>
	<!-- <p>
		<span>aaaaa</span>
	</p> -->
	<div class="box">
		<div class="father  clearfix">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>

		</div>
	</div>

	<div class="father2"></div>

	
</body>
</html>